<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UploadImage from '@/components/uploadImage.vue'
import UploadFile from '@/components/uploadFile.vue'
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import { transformDuration } from '@/utils'

const $route = useRoute()
const $router = useRouter()

const id = $route.query.id
const keyword = ref('')
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref()
const formVisible = ref(false)
const formData = ref({
  course_id: id,
  id: null,
  name: '',
  description: '',
  image_url: '',
  duration: null,
  video_url: '',
  order: null,
})

const getListData = async (page) => {
  try {
    const res = await api.get('course/sections/' + id, {
      params: {
        keyword: keyword.value,
        page,
        pageSize: pageSize.value,
      },
    })
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
}

const showFormData = async (record) => {
  if (record) {
    formData.value.id = record.id
    formData.value.name = record.name
    formData.value.description = record.description
    formData.value.image_url = record.image_url
    formData.value.duration = transformDuration(record.duration, true)
    formData.value.video_url = record.video_url
    formData.value.order = record.order * 1
  } else {
    resetFormData()
  }
  formVisible.value = true
}

const changeFile = async (e) => {
  console.warn('e', e)
  formData.value.video_url = e
}

const formSubmit = async () => {
  console.log('formData', formData.value)
  var obj = { ...formData.value }
  if (!obj.name) {
    Message.error('章节标题不可为空')
    return false
  }
  if (!obj.description) {
    Message.error('章节简介不可为空')
    return false
  }
  if (!obj.image_url) {
    Message.error('章节封面不可为空')
    return false
  }
  if (!obj.duration) {
    Message.error('章节时长不可为空')
    return false
  }
  if (!obj.video_url) {
    Message.error('章节视频不可为空')
    return false
  }
  if (formData.value.id) {
    try {
      const res = await api.post('course/section/update/' + obj.id, obj)
      Message.success(res.message)
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  } else {
    try {
      const res = await api.post('course/section/create', obj)
      Message.success(res.message)
      formVisible.value = false
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  }
}

const resetFormData = async () => {
  formData.value = {
    course_id: id,
    id: null,
    name: '',
    description: '',
    image_url: '',
    duration: '',
    video_url: '',
    order: null,
  }
}

const deleteItem = async (id) => {
  try {
    const res = await api.get('course/section/del/' + id)
    Message.success(res.message)
    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

getListData(1)
</script>

<template>
  <div class="page">
    <div class="header">
      <a-space>
        <a-input :style="{ width: '240px' }"
                 v-model="keyword"
                 placeholder="按标题查询"
                 allow-clear />

        <a-button @click="getListData(1)"
                  type="primary">查询</a-button>
      </a-space>
      <a-button @click="showFormData()"
                type="primary">新增章节</a-button>
    </div>

    <a-table :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="标题"
                        data-index="name"></a-table-column>
        <a-table-column title="封面">
          <template #cell="{ record }">
            <a-image width="100"
                     height="100"
                     fit="cover"
                     :src="record.image_url" />
          </template>
        </a-table-column>
        <a-table-column title="时长">
          <template #cell="{ record }">
            {{ transformDuration(record.duration, true) }}
          </template>
        </a-table-column>
        <a-table-column title="排序"
                        data-index="order"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-popconfirm @ok="deleteItem(record.id)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm>
              <a-button @click="showFormData(record)"
                        type="primary"
                        size="mini">编辑</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal :title="formData.id ? '编辑章节':'新增章节'"
             width="600px"
             :on-before-ok="formSubmit"
             v-model:visible="formVisible">
      <a-form>
        <a-form-item label="章节标题">
          <a-input :style="{width:'400px'}"
                   v-model="formData.name"
                   placeholder="请输入章节标题"
                   allow-clear></a-input>
        </a-form-item>
        <a-form-item label="章节简介">
          <a-textarea :style="{width:'400px'}"
                      v-model="formData.description"
                      placeholder="请输入章节简介"
                      allow-clear
                      auto-size />
        </a-form-item>
        <a-form-item label="章节封面">
          <div style="width: 400px">
            <UploadImage width="200px"
                         height="200px"
                         v-model="formData.image_url"></UploadImage>
          </div>
        </a-form-item>
        <a-form-item label="章节时长">
          <a-time-picker placeholder="请选择章节时长"
                         style="width: 400px"
                         v-model="formData.duration"
                         disableConfirm />
        </a-form-item>
        <a-form-item label="章节视频">
          <div class="flex fd_c">
            <video v-if="formData.video_url"
                   class="mb20"
                   width="100%"
                   controls
                   :src="formData.video_url"></video>
            <UploadFile width="200px"
                        height="200px"
                        @change="changeFile"
                        :accepts="['video/mp4']"></UploadFile>
          </div>
        </a-form-item>
        <a-form-item label="章节排序">
          <a-input-number v-model="formData.order"
                          :style="{width:'400px'}"
                          placeholder="请输入章节排序"></a-input-number>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

video {
  width: 200px;
  height: 200px;
}
</style>